<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/login.css">
    <style>
        .jumbotron {
            background-image: url(../message/456.jpg);
            color: aliceblue;
        }
        
        h1 {
            width: 400px;
            margin-left: 230px;
        }
    </style>
</head>

<body>
    <div class="jumbotron">
        <h1>欢迎登陆</h1>
        <div class="login">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" placeholder="用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" placeholder="密码">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>



    <script src="../js/jquery.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        // 当前定义的变量,是 账号 可以错误的次数

        let time = 5;

        $('form').submit(function() {
            // 1, 获取数据
            let name = $('[type="text"]').val();
            let pwd = $('[type="password"]').val();



            // 2, 通过 promise方式 发送请求
            const p = new Promise(function(f, r) {
                // 发送 ajax请求
                $.ajax({
                    url: '../server/goods_login.php',
                    type: 'post',
                    data: {
                        userName: name,
                        userPwd: pwd
                    },
                    dataType: 'json',
                    success: f,
                    error: r,
                })
            })

            p.then(function(res) {

                // 动态渲染生成页面
                if (res.result === 1) {
                    window.alert('恭喜您登录成功,点击确定,哪儿来的回哪儿去');



                    // 获取url地址栏中 传参的url地址数据
                    let url = window.location.search.substr(5);
                    window.location.href = url;

                    // 设定 cookie 存储登录信息
                    mySetCookie('login', 1, 7 * 24 * 60 * 60, '/');

                } else if (res.result === 0) {
                    time--;
                    if (time === 0) {
                        window.alert('对不起,您的账号被冻结,请您到银行前台解锁');
                        // 禁用标签
                        $('[type="text"]').prop('disabled', true);
                        $('[type="password"]').prop('disabled', true);
                        $('button').prop('disabled', true);
                        return;
                    }
                    window.alert(`您今天还可以错${time}次`);
                }
            })


            // 阻止默认事件
            return false;
        })
    </script>


</body>

</html>